<template>
  <div class="detail">
    <van-nav-bar
        :title="product.name"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
    />
    <div class="product">
      <!-- 商品展示轮播图 -->
      <div class="swipper">
        <van-swipe :autoplay="2000">
          <van-swipe-item v-for="(item,index) in product.detailList" :v-key="index">
            <viewer>
              <img :src="item" alt="">
            </viewer>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="price">
        <p class="num"><small>￥</small>{{product.price}}</p>
      </div>
      <div class="pro-info">
        <p class="name">{{product.name}}</p>
        <div class="intro">
          <p>容量：300CC</p>
          <p>主题：山水</p>
          <p>泥料：紫砂</p>
          <p>器型：圆形</p>
        </div>
      </div>
      <div class="pro-detail">
        <p>
          此壶以经典壶型石瓢为基础，精选原矿紫泥全手工制作而成，泥质细腻，色泽温润雅致。整体造型简约大方，壶身呈金字塔形，丰润饱满，压盖之上以桥钮装饰，直流简而有力，出水顺畅，壶把呈倒三角势，与壶身之型互补，形成和谐的美学效果。
        </p>
        <div class="imgList">
          <img :src="item" alt="" v-for="(item,index) in product.detailList" :v-key="index">
        </div>
      </div>
    </div>
<!--    <div class="buy fit">
      <div class="btns">
        <button class="cartBtn" @click="toCart">加入购物车</button>
        <button class="buyBtn" @click="buy">立即购买</button>
      </div>
    </div>-->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="toMall" />
      <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="toCart"
      />
      <van-goods-action-button
          type="danger"
          text="立即购买"
          @click="buy"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: "GoodDetails",
  data(){
    return {
      product: ''
    }
  },
  created() {
    this.product = this.$route.query.item
  },
  methods:{
    onClickLeft(){
      this.$router.push({
        path: '/mall',
        query:{
          tab: 2
        }
      });
    },
    toCart(){
      this.$router.push({
        path: '/cart',
        query:{
          tab: 3,
          product: this.product
        }
      })
    },
    buy(){
      this.$router.push({
        path: '/buy',
        query:{
          product: this.product
        }
      })
    },
    toMall(){
      this.$router.push({
        path: '/mall',
        query:{
          tab: 2
        }
      });
    },
    onClickIcon(){
      this.$toast('功能尚未开通，敬请期待!');
    }
  }
}
</script>

<style scoped lang="less">
.mint-header{
  background-color: #993F26;
  position: fixed;
  width: 100%;
}
.detail{
  padding-bottom: 60px;
}
.buy{
  background-color: #993F26;
  width: 100%;
  position: fixed;
  bottom: 0;
  padding: 10px;
  .btns{
    float: right;
    padding-right: 20px;
    button{
      padding: 10px;
      outline: none;
      border: none;
      font-weight: bolder;
    }
    .cartBtn{
      background-color: #FF9803;
      color: white;
      border-radius: 10px 0 0 10px;
    }
    .buyBtn{
      background-color: #FF5001;
      color: white;
      border-radius: 0 10px 10px 0;
    }
  }
}
/*产品详情展示*/
.product{
  padding-top: 40px;
}
//轮播图
.van-swipe{
  height: 200px;
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
//价格
.price{
  padding: 10px 10px;
  background-color: #FF6201;
  color: white;
  .num{
    font-size: 2rem;
  }
}

//介绍
.pro-info{
  padding: 10px;
  .name{
    font-size: 2rem;
  }
  .intro{
    padding: 10px;
    background-color: #F9F9F9;
    p{
      color: #FF5001;
    }
  }
}
//图片详情
.pro-detail{
  padding: 10px;
  img{
    width: 100%;
  }
  p{
    padding: 10px;
    background-color: #F9F9F9;
  }
}
</style>
